'use client';

import React from 'react';
import { signIn } from 'next-auth/react';
import { Button } from '@/components/ui/button';
import { useToast } from '@/components/ui/use-toast';

interface GoogleSignInButtonProps {
  callbackUrl?: string;
  className?: string;
}

/**
 * Google OAuth登录按钮组件
 * 遵循Google官方OAuth 2.0最佳实践
 */
export default function GoogleSignInButton({
  callbackUrl = '/dashboard',
  className = '',
}: GoogleSignInButtonProps) {
  const [isLoading, setIsLoading] = React.useState(false);
  const { toast } = useToast();

  const handleSignIn = async () => {
    try {
      setIsLoading(true);
      await signIn('google', { callbackUrl });
    } catch (error) {
      console.error('Google登录失败:', error);
      toast({
        title: '登录失败',
        description: '使用Google登录时发生错误，请稍后重试',
        variant: 'destructive',
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Button
      type="button"
      variant="outline"
      onClick={handleSignIn}
      disabled={isLoading}
      className={`flex items-center justify-center gap-2 ${className}`}
    >
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 488 512" 
        width="20" 
        height="20"
        fill="currentColor"
      >
        <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
      </svg>
      <span>{isLoading ? '登录中...' : 'Google登录'}</span>
    </Button>
  );
} 